<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert Candidate</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css" />
<link rel="stylesheet" type="text/css"
	href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css"
	href="css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="validationWithJs.js"></script>
<%
String year = request.getAttribute("curYear").toString();
String month = request.getAttribute("curMonth").toString();
String regNo = request.getAttribute("regNo").toString();
String uploadPath = (String) request.getAttribute("pathUploadResult");
String fileName = (String) request.getAttribute("fileName");
%>

<script type="text/javascript">
	function flyToPage(task, nomor) {
	if (task == "uploadPhoto") {
		var valid = validateImage();
	} else {
		document.forms[0].task.value = task;
		document.forms[0].nomor.value = nomor;
		document.forms[0].submit();
	}
	if (valid == true) {
		if( document.getElementById('birthDate').value!="" ||  document.getElementById('birthDate').value!=null){
			document.forms[0].birthDateForm.value =  document.getElementById('birthDate').value;
		}
		if (document.getElementById('testTechDate').value != null || document.getElementById('testTechDate').value != "") {
			document.forms[0].techTestDateForm.value  = document.getElementById('testTechDate').value;
		}
		
		document.forms[0].task.value = task;
		document.forms[0].nomor.value = nomor;
		document.forms[0].submit();
	}
	}

	function cekStatus(){
		if(document.getElementById('Acc').checked){
			document.getElementById('acceptedDiv').style.display ='';
		}else{
			document.getElementById('acceptedDiv').style.display ='none';
		}
	}
	function onDataFilled(val, id) {
		if (val != '' && id!='') {
			document.getElementById('' + id + '').style.display = 'none';
		}
	}
	
	function validateImage() {
		var statusType = false;
		var statusSize = false;
		var statusDimension = false;
		
		var fsize = $('#photo')[0].files[0].size;

		if (fsize <= 5242880) {
			statusSize = true;
		}
		var _URL = window.URL || window.webkitURL;
		var file = $('#photo')[0].files[0];
		var img = new Image();
		img.src = _URL.createObjectURL(file);
		
		if(img.height > 227 || img.width > 151){
			statusDimension = true;
		}
		
		var extensions = new Array("jpeg", "jpg");
		var imageFile = document.forms[0].elements['photoFile'].value;
		var imageLength = imageFile.length;
		var pos = imageFile.lastIndexOf('.') + 1;

		var ext = imageFile.substring(pos, imageLength);

		var final_ext = ext.toLowerCase();

		for (i = 0; i < extensions.length; i++) {
			if (extensions[i] == final_ext) {
				statusType = true;
			}
		}

		if (statusType == true && statusSize == true) {
			return true;
		} else if (statusType == false) {
			window.alert("You must upload an image file with one of the following extensions: "
							+ extensions.join(', ') + ".");
		} else if (statusSize == false) {
			window.alert("You must upload an image file <= 5 MB");
		}else if(statusDimension == false){
			window.alert("You must upload an image file min. 4x6 cm");
		}else if (statusType != true || statusSize != true) {
			return false;
		}
	}

	function setSelectedImage(){
		var _URL = window.URL || window.webkitURL;
		var file = $('#photo')[0].files[0];
		var img = new Image();
		img.src = _URL.createObjectURL(file);
		<%if(uploadPath!=null){%>
		var upload = document.getElementById('uploadImg').getAttribute('src');

		if(upload){

			document.getElementById('uploadImg').style.display='none';
			document.getElementById('selectImgAfterUpload').src=img.src;
			document.getElementById('selectImgAfterUpload').style.display='';
		}
		<%}%>
		document.getElementById('noImgDiv').style.display='none';
		document.getElementById('selectedImgDiv').style.display = '';
		document.getElementById('selectedImg').src=img.src;
		
		var str = document.forms[0].elements['photoFile'].value;
		var res = str.substr(str.lastIndexOf("\\")+1);
		document.getElementById('imgName').value = res;	
	}

	function insert() {

		if(validateForm()){
		
			var insert = confirm("Do you really want to save data ? ");
			if (insert == true) {
				if (document.getElementsByName('cModel.cityId')[0].value == "Others") {
					document.forms[0].selectOtherCity.value = "yes";
				}

				if (document.getElementsByName('cModel.schoolCityId')[0].value == "Others") {
					document.forms[0].selectOtherSchCity.value = "yes";
				}
				
				document.forms[0].elements['cModel.birthDte'].value = document.getElementById('birthDate').value;
	
				if (document.getElementById('testTechDate').value != null || document.getElementById('testTechDate').value != "") {
				document.forms[0].elements['cModel.techTestDate'].value = document.getElementById('testTechDate').value;
				}
				
				if(document.getElementById('filePhoto').value!=""){
					if(document.getElementById('pathPhoto').value!=""){
					document.forms[0].elements['cModel.photo'].value = document.getElementById('pathPhoto').value;
					}
				}
				
				document.forms[0].task.value = "insertCandidate";
				document.forms[0].submit();
			}
		}

	}

	function doComboSchool() {
		var status;
		var school = document.getElementsByName('cModel.schoolId')[0].value;
		if (school == "Others") {
			status = document.forms[0].selectOtherSchool.value = "yes";
			document.getElementById('comboSchoolCity').style.display = '';
			document.getElementById('idSchoolName').style.display = '';
			document.getElementById('idSchoolName').focus();
			document.getElementById('idSchoolCity').style.display = 'none';
		} else {
			status = document.forms[0].selectOtherSchool.value = "no";
			document.getElementById('idSchoolName').style.display = 'none';
			document.getElementById('comboSchoolCity').style.display = 'none';
			document.getElementById('idSchoolCity').style.display = 'none';

		}
		var task = 'comboSchool';
		$.ajax({
			type : "POST",
			url : "/WebFinalProject/Candidate.do",
			data : "schoolId=" + school + "&task=" + task
					+ "&selectOtherSchool=" + status,
			success : function(response) {
				$('#City').html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
	}

	function selSchoolCity() {
		var schoolCity = document.getElementsByName('cModel.schoolCityId')[0].value;
		if (schoolCity != "Others") {
			document.getElementById('idSchoolCity').style.display = 'none';
		}
		else{
			document.getElementById('idSchoolCity').style.display = '';
			document.getElementById('idSchoolCity').focus();
		}
	}

	function selOtherSchoolCity() {
		document.getElementById('idSchoolCity').style.display = '';
		document.getElementById('idSchoolCity').focus();
		document.getElementById('idSchoolCity').readOnly = false;
	}

	function selSchool() {
		var school = document.getElementsByName('cModel.schoolId')[0].value;
		if (school != "Others") {
			document.getElementById('idSchoolName').style.display = 'none';
		}
	}

	function selOtherSchool() {

		document.getElementById('schoolCity').style.display = 'none';
		document.getElementById('idSchoolCity').style.display = 'none';
		document.getElementById('idSchoolName').style.display = '';
		document.getElementById('idSchoolName').focus();
		document.getElementById('comboSchoolCity').style.display = '';
	}

	function selCity() {
		var city = document.getElementsByName('cModel.cityId')[0].value;
		if (city != "Others") {
			document.getElementById('idCity').style.display = 'none';
		}
		else{
			selOtherCity();
		}
	}
	
	function setDisplayOtherCity(){
		document.getElementById('idCity').style.display = '';
		document.getElementById('idCity').focus();
	}
	
	function hideField() {
		document.getElementById('idSchoolName').style.display = 'none';
		document.getElementById('comboSchoolCity').style.display = 'none';
		document.getElementById('idCity').style.display = 'none';
		document.getElementById('idSchoolCity').style.display = '';
		document.getElementById('idSchoolCity').readOnly = true;
		document.getElementById('idCardNum1').style.display = 'none';
		document.getElementById('idCardNum2').style.display = 'none';
		document.getElementById('fullName').style.display = 'none';
		document.getElementById('isValidFullName').style.display = 'none';
		document.getElementById('birthDt').style.display = 'none';
		document.getElementById('email').style.display = 'none';
		document.getElementById('isValidEmail').style.display = 'none';
		document.getElementById('educationLevel').style.display = 'none';
		document.getElementById('mobileNumber').style.display = 'none';
		document.getElementById('isValidMobile').style.display = 'none';
		document.getElementById('postalCode').style.display = 'none';
		document.getElementById('isValidBirthPlce').style.display = 'none';
		document.getElementById('isValidCity').style.display = 'none';
		document.getElementById('isValidCountry').style.display = 'none';
		document.getElementById('isValidProvince').style.display = 'none';
		document.getElementById('isValidPhoneNum').style.display = 'none';
		document.getElementById('isValidGradYear').style.display = 'none';
		document.getElementById('isValidSchoolName').style.display = 'none';
		document.getElementById('isValidMajority').style.display = 'none';
		document.getElementById('isValidGpa').style.display = 'none';
		document.getElementById('isValidSchoolName').style.display = 'none';
		document.getElementById('isValidSchoolCity').style.display = 'none';
		document.getElementById('isValidTechPlc').style.display = 'none';
		document.getElementById('isValidTechScore').style.display = 'none';
		document.getElementById('selectedImgDiv').style.display = 'none';
		document.getElementById('acceptedDiv').style.display = 'none';
		document.getElementById('alertHasRegistered').style.display = 'none';
	}
	
	function checkForm(){
		hideField();
		setDisplayOthersSchoolName();
		setDisplayOthersSchoolCity();
		selOtherCity();
		if(document.forms[0].birthDateForm.value!=""||document.forms[0].birthDateForm.value!=null){
			document.getElementById('birthDate').value = document.forms[0].birthDateForm.value;
		}
		if(document.forms[0].techTestDateForm.value!=""||document.forms[0].techTestDateForm.value!=null){
			document.getElementById('testTechDate').value = document.forms[0].techTestDateForm.value;
		}
	}
	function setDisplayOthersSchoolName(){
		if(document.getElementsByName('cModel.schoolId')[0].value == 'Others'){	
		document.getElementById('idSchoolName').style.display ='';
		document.getElementById('idSchoolCity').style.display ='none';
		document.getElementById('comboSchoolCity').style.display = '';
		}
	}

	function setDisplayOthersSchoolCity(){
		if(document.getElementsByName('cModel.schoolCityId')[0].value == 'Others'){
			document.getElementById('idSchoolCity').style.display ='';
			document.getElementById('idSchoolCity').focus();
			document.getElementById('idSchoolCity').readOnly = false;
		}
	}

	function selOtherCity(){
		if(document.getElementsByName('cModel.cityId')[0].value == 'Others'){
			document.getElementById('idCity').style.display ='';
			document.getElementById('idCity').focus();
			document.getElementById('city').style.display ='none';
			document.getElementById('isValidCity').style.display ='none';
			
		}
	}
	function validateForm() {
		var idCard = document.forms[0].elements['cModel.idCardNum'].value;
		var name = document.forms[0].elements['cModel.fullName'].value;
		var date = document.getElementById('birthDate').value;
		var emailDt = document.forms[0].elements['cModel.email'].value;
		var mobileNum = document.forms[0].elements['cModel.mobileNumber'].value;
		var eduLevel = document.forms[0].elements['cModel.educationLevel'].value;
		var task = 'checkRegistration';
		var statusReg = "";
		
		$.ajax({
			type : "POST",
			url : "/WebFinalProject/Candidate.do",
			async : false,
			data : "emailCandidate=" + emailDt + "&task=" + task + "&idCardNum=" + idCard,
			success : function(response) {
				statusReg = response;
		
					if(statusReg=='0'){
						document.getElementById('alertHasRegistered').style.display = '';
						return false;
					}
						
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
		if (idCard == null || idCard == "" ||name == null || name == "" ||date == null || date == ""
				||emailDt == null || emailDt == "" ||mobileNum == null || mobileNum == ""||eduLevel == null || eduLevel == "" ||statusReg=='0'){
			if (idCard == null || idCard == "") {
				document.getElementById('idCardNum1').setAttribute("style","display:'';");
			}
			if (name == null || name == "") {
				document.getElementById('fullName').style.display = '';
			}
			if (date == null || date == "") {
				document.getElementById('birthDt').style.display = '';
			}
			if (emailDt == null || emailDt == "") {
				document.getElementById('email').style.display = '';
			}
			if (mobileNum == null || mobileNum == "") {
				document.getElementById('mobileNumber').style.display = '';
			}
			if (eduLevel == null || eduLevel == "") {
				document.getElementById('educationLevel').style.display = '';
			}
			return false;
		}else{
			return true;	
		}
	}
	
	function validateCharacter(val,id1,id2){
		var validChar =/^[a-zA-Z]|[\s]+$/; 
		if(!val.match(validChar) && val!=''){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val.match(validChar)){
			document.getElementById(''+id1+'').style.display = 'none';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val==''){
			document.getElementById(''+id1+'').style.display = 'none';
		}
	}
	
	function validateNumber(val,id1,id2,name){
		var isi =  val;
		while (!isNumber(isi)) {
			isi = isi.substring(0, isi.length - 1);
		}
		document.getElementsByName(name)[0].value = isi;
		
		var numbers =/^[0-9]+$/; 
		if(!val.match(numbers) && val!=''){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val.match(numbers)){
			document.getElementById(''+id1+'').style.display = 'none';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val==''){
			document.getElementById(''+id1+'').style.display = 'none';
		}
		
	}
	
	function isNumber(isi) {
		return !isNaN(isi);
	}
	
	function validateEmail(val,id1,id2){
		var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		if(!val.match(emailvalid) && val!=''){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val.match(emailvalid)){
			document.getElementById(''+id1+'').style.display = 'none';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val==''){
			document.getElementById(''+id1+'').style.display = 'none';
		}
	}
	
	function validateNumChar(val,id1,id2){
		var pattern =/^[0-9]|[a-zA-Z]|[\s]+$/; 
		if(!val.match(pattern) && val!=''){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val.match(pattern)){
			document.getElementById(''+id1+'').style.display = 'none';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(val==''){
			document.getElementById(''+id1+'').style.display = 'none';
		}	
	}
	
	function validateValue(val,id1,id2){
		var pattern = /[0-9]+\.[0-9]{2}([^0-9]|$)/;
		var pattern2 = /^[0-9]{0,3}$/;
		if(!val.match(pattern) && val!='' && id1=='isValidGpa'){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
		}else if(!val.match(pattern2) && val!='' && id1=='isValidTechScore'){
			if(!val.match(pattern)){
			document.getElementById(''+id1+'').style.display = '';
			document.getElementById(''+id2+'').style.display = 'none';
			}else{
				document.getElementById(''+id1+'').style.display = 'none';
				document.getElementById(''+id2+'').style.display = 'none';
			}
			
		}else if(val.match(pattern) && id1=='isValidGpa'){
			if(Math.round(val)<=4){
			document.getElementById(''+id1+'').style.display = 'none';
			document.getElementById(''+id2+'').style.display = 'none';
			}else{
				document.getElementById(''+id1+'').style.display = '';
				document.getElementById(''+id2+'').style.display = 'none';
			}
		}else if(val==''){
			document.getElementById(''+id1+'').style.display = 'none';
		}
	}
	
</script>
<%if(session.getAttribute("result") != null)
	{
		String message = session.getAttribute("result").toString();
		%>
			<script type="text/javascript">
				window.alert('<%=message%>');
			</script>
		<%
		session.removeAttribute("result");
	}%> 
</head>
<body onload="javascript:checkForm();">
	<center>
	<table width="100%" class="bodyTable boxShadow">

			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>

			<!-- Content -->
			<tr>
				<td rowspan="4" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td class="headerBox blueBackground leftAlign">
					User Management > 
					<a href="/WebFinalProject/Candidate.do">Manage Candidate</a> > 
					Add New Candidate
				</td>
			</tr>
			<tr id="alertAdmin">
				<td align="center" class="alert alert-info">
	    		<a href="#" class="close" data-dismiss="alert">&times;</a>
	        		<strong>Note!</strong> * = required field
	    		</td>
	    	</tr>
	    	<tr id="alertHasRegistered">
	    		<td align="center" class="alert alert-warning">
	    		<a href="#" class="close" data-dismiss="alert">&times;</a>
        			<strong>Warning !</strong> This candidate data has been registered
	    		</td>
			</tr>
			<tr>
				<td align="center" class="contentStyle"><br> 
				<html:form action="/Candidate" method="post" enctype="multipart/form-data" id="myForm">
						<html:hidden property="task" name="candidateForm" />
						<html:hidden property="nomor" name="candidateForm" />
						<html:hidden property="idCardNum" name="candidateForm" />
						<html:hidden property="birthDateForm" name="candidateForm" />
						<html:hidden property="techTestDateForm" name="candidateForm" />
						<html:hidden property="cModel.photo" name="candidateForm" />
						<html:hidden property="emailCandidate" name="candidateForm" />
						<html:hidden property="selectOtherSchool" name="candidateForm" />
						<html:hidden property="selectOtherSchCity" name="candidateForm" />
						<html:hidden property="selectOtherCity" name="candidateForm" />
						<html:hidden property="cModel.birthDte" name="candidateForm" />
						<html:hidden property="cModel.techTestDate" name="candidateForm" />
						<table align="center" width="80%">
							<tr>
								<td align="center">
									<table width="95%">
										<font color="red">
											<html:errors/>
										</font>
										<tr>
											<td align="center" style="vertical-align: middle;">
												<table border="0" class="boxShadow" width="100%">
													<tr>
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Add New Candidate</td>
													</tr>
													<tr>
														<td colspan="3" align="center">
															<div id="selectedImgDiv"><img alt="" src="" width="151px" height="227px" id="selectedImg"/><br><br></div>
																<% if(uploadPath==null && fileName==null){ %>
																	<div id="noImgDiv"><img alt="" src="images/no-profile-img.gif" width="151px" height="227px" /><br><br></div>
																<% }else if(uploadPath!=null){ %>
																	<script type="text/javascript">
																		document.getElementById('selectedImgDiv').style.display='none';
																		document.getElementById('noImgDiv').style.display='none';
																	</script>
																	<img alt="" src="" width="151px" height="227px" id="selectImgAfterUpload"/><br><br>
																	<div id="uploadImgDiv"><img alt="" src='<%= uploadPath %>' width="151px" height="227px" id="uploadImg"/><br><br></div>
																<% } %>
															<html:file property="photoFile" name="candidateForm" onchange="javascript:setSelectedImage();" styleId="photo" /> 
	 															<% if (fileName != null) { %> 
																	Filename : <input type="text" value="<%=fileName%>" /> 
		 															<input type="hidden" value="<%=uploadPath%>" id="pathPhoto" /> 
	 															<% } else { %> 
		 															Filename : <html:text property="cModel.photoFileName" name="candidateForm" styleId="imgName" readonly="true"/>  
		 															<input type="hidden" value="" id="pathPhoto" />
	  															<% } %> 
	  																<!-- <input type="button" class="buttonStyle" value="Upload" onclick="javascript:flyToPage('uploadPhoto',1);" /> -->
	  																<span>&nbsp;
																		<table title="upload" class="buttonStyle" style="cursor: pointer; width:60px;" onclick="javascript:flyToPage('uploadPhoto',1);">
																			<tr>
																				<td style="vertical-align: middle;"><img src="images/uploadButton.png"/></td>
																				<td style="vertical-align: middle;">&nbsp;<b>Upload</b></td>
																			</tr>
																		</table>												
																	</span><br><br>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign" width="200px">Job Code</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.jobCode" name="candidateForm" styleClass="comboSmall">
																<logic:notEmpty name="candidateForm" property="listJob">
																	<html:optionsCollection name="candidateForm" property="listJob" label="jobId" value="jobId" />
																</logic:notEmpty>
															</html:select> 
															<html:select property="cModel.jobCode" name="candidateForm" styleClass="comboMedium">
																<logic:notEmpty name="candidateForm" property="listBatch">
																	<html:optionsCollection name="candidateForm" property="listBatch" label="batch" value="batch" />
																</logic:notEmpty>
															</html:select>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Reg. No</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.regNo" name="candidateForm" styleClass="comboSmall">
																<logic:notEmpty name="candidateForm" property="listJob">
																	<html:optionsCollection name="candidateForm" property="listJob" label="jobId" value="jobId" />
																</logic:notEmpty>
															</html:select> 
															<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=year%>"></html:text> 
															<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=month%>"></html:text> 
															<html:text property="cModel.regNo" maxlength="3" name="candidateForm" styleClass="textSmall" value="<%=regNo%>"></html:text>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">ID Card Number*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.idCardNum" name="candidateForm" onkeyup="javascript:return validateNumber(this.value, 'idCardNum2', 'idCardNum1','cModel.idCardNum');" maxlength="20"/>
															<span class="warningText" id="idCardNum1">&nbsp; *ID Card number is required</span>	
															<span class="warningText" id="idCardNum2">&nbsp; *ID Card number is invalid e.g valid : 1670309900064</span>		
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Personal Information</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Full Name*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.fullName" name="candidateForm" onkeyup="return validateCharacter(this.value, 'isValidFullName','fullName');" maxlength="100"/>
															<span class="warningText" id="fullName">&nbsp; *Please fill out fullname</span>
															<span class="warningText" id="isValidFullName">&nbsp; *Fullname is invalid e.g valid : Mayang Sari</span>		
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Gender</td> 
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.gender"name="candidateForm" styleClass="comboMedium">
																<html:option value="">Select</html:option>
																<html:option value="M">Male</html:option>
																<html:option value="F">Female</html:option>
															</html:select>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Place of Birth</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.birthPlace" name="candidateForm" maxlength="20" onkeyup="return validateCharacter(this.value, 'isValidBirthPlce','');"/>
															<span class="warningText" id="isValidBirthPlce">&nbsp; *Birth place is invalid e.g valid : Seoul</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Date of Birth*</td>
														<td class="formListStyle" width="10px">:</td>
														<td id="datePicker" class="formListStyle leftAlign">
															<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
															<span id="birthDatePicker" class="input-append" >
																<input type="text" id="birthDate" data-format="dd-MM-yyyy" readonly="readonly"></input>&nbsp;
																<span class="add-on" style="height:12px; cursor:pointer;"> 
																	<i data-date-icon="icon-calendar" data-time-icon="icon-time"></i>
																</span>
															</span> 
															<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> 
															<script type="text/javascript" src="js/bootstrap.min.js"></script>
															<script type="text/javascript">
																$('#birthDatePicker')
																		.datetimepicker(
																				{
																					format : 'dd-MM-yyyy',
																					pickTime : false,
																					maskInput : true,
																					endDate: new Date()
																				});
																$('#birthDatePicker').datetimepicker().on('changeDate', function(e) {
																	document.getElementById('birthDt').style.display = 'none';
																});
															</script>
															<span class="warningText" id="birthDt">&nbsp; *Please select birth date</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Religion</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.religion" name="candidateForm" styleClass="comboMedium">
																<html:option value="">Select</html:option> 
																<html:option value="Moslem">Moslem</html:option>
																<html:option value="Buddha">Buddha</html:option>
																<html:option value="Catholic">Catholic</html:option>
																<html:option value="Protestant">Protestant</html:option>
																<html:option value="Hindu">Hindu</html:option>
															</html:select>&nbsp;&nbsp;&nbsp; 
															Marital Status : 
															<html:select property="cModel.maritalStatus" name="candidateForm" styleClass="comboMedium">
																<html:option value="">Select</html:option>
																<html:option value="Married">Married</html:option>
																<html:option value="Single">Single</html:option>
																<html:option value="Widower">Widower</html:option>
																<html:option value="Widow">Widow</html:option>
															</html:select>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign topValign">Address</td>
														<td class="formListStyle topValign" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:textarea property="cModel.address" rows="5" style="width:98%;" name="candidateForm" onkeyup="javascript:cekMaxLength('cModel.address',200);"></html:textarea>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Postal Code</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.postalCode" name="candidateForm" styleClass="textMedium" maxlength="5" onkeyup="return validateNumber(this.value, 'postalCode','','cModel.postalCode');"/>
															<span class="warningText" id="postalCode">Postal code is invalid. e.g valid : 30139</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">City</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select name="candidateForm" property="cModel.cityId" style="width:200px" styleClass="comboLarge" onchange="javascript:selCity();">
																<html:option value="">=========Select=========</html:option>
																<logic:notEmpty name="candidateForm" property="listCity">
																	<html:optionsCollection name="candidateForm" property="listCity" label="city" value="cityId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherCity();">Others</option>
															</html:select> &nbsp; 
															<html:text property="cModel.city" name="candidateForm" styleClass="textMedium" styleId="idCity" maxlength="30" onkeyup="return validateCharacter(this.value, 'isValidCity','');"/>
															<span class="warningText" id="isValidCity">&nbsp; *City is invalid. e.g valid : Jakarta</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Country</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.country" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateCharacter(this.value, 'isValidCountry','');"/>
															<span class="warningText" id="isValidCountry">&nbsp; *Country is invalid. e.g valid : Indonesia</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Province</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.province" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateCharacter(this.value, 'isValidProvince','');"/>
															<span class="warningText" id="isValidProvince">&nbsp; *Province is invalid. e.g valid : Sumatera Selatan</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Email*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.email" name="candidateForm" styleClass="textLarge" maxlength="50" onkeyup="return validateEmail(this.value, 'isValidEmail','email');"/>
															<span class="warningText" id="email">&nbsp; *Please fill out email</span>
															<span class="warningText" id="isValidEmail">&nbsp; *Email is invalid. e.g valid : iin_back@yahoo.com</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Phone Number</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.phoneNumber" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateNumber(this.value, 'isValidPhoneNum','','cModel.phoneNumber');"/>
															<span class="warningText" id="isValidPhoneNum">&nbsp; *Phone number is invalid. e.g valid : 0217890002</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Mobile Number*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.mobileNumber" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateNumber(this.value, 'isValidMobile','mobileNumber','cModel.mobileNumber');"></html:text>
															<span class="warningText" id="mobileNumber">&nbsp; *Please fill out mobile number</span>
															<span class="warningText" id="isValidMobile">&nbsp; *Mobile number is invalid. e.g valid : 085275000123</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Education Description</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Educational Level*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.educationLevel" name="candidateForm" styleClass="comboMedium" onchange="return onDataFilled(this.value, 'educationLevel');">
																<html:option value="">Select</html:option>
																<html:option value="S3">S3</html:option>
																<html:option value="S2">S2</html:option>
																<html:option value="S1">S1</html:option>
																<html:option value="D4">D4</html:option>
																<html:option value="D3">D3</html:option>
																<html:option value="D2">D2</html:option>
																<html:option value="D1">D1</html:option>
																<html:option value="SMU">SMU</html:option>
																<html:option value="SMK">SMK</html:option>
															</html:select>
															<span class="warningText" id="educationLevel">&nbsp; *Please select educational level</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Graduation Year</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.gradYear" value="" name="candidateForm" styleClass="textSmall" maxlength="4" onkeyup="return validateNumber(this.value, 'isValidGradYear','','cModel.gradYear');"/>
															<span class="warningText" id="isValidGradYear">&nbsp; *Grad year is invalid. e.g valid : 2013</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">School Name</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select name="candidateForm" property="cModel.schoolId" styleClass="comboLarge" onchange="javascript:doComboSchool();">
																<html:option value="">=========Select=========</html:option>
																<logic:notEmpty name="candidateForm" property="listSchoolName">
																	<html:optionsCollection name="candidateForm" property="listSchoolName" label="schoolName" value="schoolId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherSchool();">Others</option>
															</html:select> 
															<html:text property="cModel.schoolName" name="candidateForm" styleId="idSchoolName" styleClass="textMedium" maxlength="50" onkeyup="return validateNumChar(this.value, 'isValidSchoolName','');"/>
															<span class="warningText" id="isValidSchoolName">&nbsp; *School name is invalid. e.g valid : National Seoul University</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">School City</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<span id="City"></span>
															<html:select name="candidateForm" property="cModel.schoolCityId" styleId="comboSchoolCity" styleClass="comboMedium" onchange="javascript:selSchoolCity();">
																<html:option value="">Select</html:option>
																<logic:notEmpty name="candidateForm" property="listCity">
																	<html:optionsCollection name="candidateForm" property="listCity" label="city" value="cityId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherSchoolCity();">Others</option>
															</html:select>
															<html:text property="cModel.schoolCity" name="candidateForm" styleClass="textMedium" styleId="idSchoolCity" maxlength="30" onkeyup="return validateCharacter(this.value, 'isValidSchoolCity','');"/>
															<span class="warningText" id="isValidSchoolCity">&nbsp; *School city is invalid. e.g valid : Seoul</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Majority</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.majority" name="candidateForm" styleClass="textMedium" maxlength="50" onkeyup="return validateCharacter(this.value, 'isValidMajority','');"/>
															<span class="warningText" id="isValidMajority">&nbsp; *Majority is invalid. e.g valid : Business Management</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">GPA</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.gpa" name="candidateForm" styleClass="textSmall" maxlength="6" onkeyup="return validateValue(this.value, 'isValidGpa','');"/>
															<span class="warningText" id="isValidGpa">&nbsp; *GPA is invalid. e.g valid : 3.95 (GPA max. 4.0)</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Status Update</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Place</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.techTestPlace" name="candidateForm" styleClass="textMedium" maxlength="50" onkeyup="return validateCharacter(this.value, 'isValidTechPlc','');"/>
															<span class="warningText" id="isValidTechPlc">&nbsp; *Technical Place is invalid. e.g valid : BINUS Jakarta</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Date</td>
														<td class="formListStyle" width="10px">:</td>
														<td id="datePicker" class="formListStyle leftAlign">
															<span id="techTestDate" class="input-append">
																<input type="text" id="testTechDate" data-format="dd-MM-yyyy hh:mm:ss" readonly="readonly"></input>&nbsp; 
																<span class="add-on" style="height:12px; cursor:pointer;">
																	<i data-date-icon="icon-calendar" data-time-icon="icon-time"></i>
																</span>
															</span> 
															<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
															<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> 
															<script type="text/javascript" src="js/bootstrap.min.js"></script>
															<script type="text/javascript">
																$('#techTestDate')
																	.datetimepicker({
																		maskInput : true
																	});
															</script>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Score</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.techTestScore" name="candidateForm" maxlength="6" styleClass="textSmall" onkeyup="return validateValue(this.value, 'isValidTechScore','');"/>
															<span class="warningText" id="isValidTechScore">Technical Score is invalid. e.g valid : 85.5</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign topValign">Status</td>
														<td class="formListStyle topValign" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:checkbox property="cModel.status" value="Technical Test">&nbsp;Technical Test</html:checkbox><br />
															<html:checkbox property="cModel.status" value="Interview 1">&nbsp;Interview 1</html:checkbox><br /> 
															<html:checkbox property="cModel.status" value="Interview 2">&nbsp;Interview 2</html:checkbox><br /> 
															<html:checkbox property="cModel.status" value="Interview 3">&nbsp;Interview 3</html:checkbox><br />
															<html:checkbox property="cModel.status" value="Accepted" onclick="javascript:cekStatus();" styleId="Acc">&nbsp;Accepted</html:checkbox><br>
															<span id="acceptedDiv">
																<br>Choose Batch : <html:select property="cModel.batchId" name="candidateForm" styleClass="textMedium" onchange="return onDataFilled(this.value,'batchId');">
																	<logic:notEmpty name="candidateForm" property="listBatch">
																		<html:optionsCollection name="candidateForm" property="listBatch" label="batch" value="batchId" />
																	</logic:notEmpty>
																</html:select>
															</span>
														</td>	
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign topValign">Note</td>
														<td class="formListStyle topValign" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:textarea property="cModel.noteAdmin" rows="5" style="width:98%;" name="candidateForm" onkeyup="javascript:cekMaxLength('cModel.noteAdmin',200);"/>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
									<!-- <input type="button" class="buttonStyle" value="Save" onclick="javascript:insert();"> 
									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPage('cancel',3);"> -->
									<table align="center" style="border-spacing: 3px;">
										<tr>
											<td colspan="2" align="center" class="formListStyle">
												<table title="save" class="buttonStyle" style="cursor: pointer; width:60px;" onclick="javascript:insert();">
													<tr>
														<td style="vertical-align: middle;"><img src="images/saveButton.png"/></td>
														<td style="vertical-align: middle;">&nbsp;<b>Save</b></td>
													</tr>
												</table>												
											</td>
											<td colspan="2" align="right" class="formListStyle">
												<table title="cancel" class="buttonStyle" style="cursor: pointer; width:60px;" onclick="javascript:flyToPage('cancel',3);">
													<tr>
														<td style="vertical-align: middle;"><img src="images/cancelButton.png"/></td>
														<td style="vertical-align: middle;">&nbsp;<b>Cancel</b></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</html:form>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>